<template>
    <div class="sc-collapse">
        <div class="sc-collapse-title">
            <slot name="title"></slot>
            <i
                :class="isCollapseVm ? iconClassCollapse : iconClassExpend"
                @click="toggleCollapse"
            ></i>
        </div>
        <slot name="content" v-if="!isCollapseVm"></slot>
    </div>
</template>

<script>
export default {
    name: "ScCollapse",
    props: {
        value: {
            type: Boolean,
            default: undefined
        },
        iconClassCollapse: {
            default: "el-icon-arrow-up"
        },
        iconClassExpend: {
            default: "el-icon-arrow-down"
        }
    },
    data() {
        return {
            isCollapse: false
        };
    },
    computed: {
        isCollapseVm: {
            get() {
                if (this.value !== undefined) {
                    return !this.value;
                }
                return this.isCollapse;
            },
            set(newValue) {
                this.isCollapse = newValue;
                this.$emit("input", !newValue);
            }
        }
    },
    methods: {
        toggleCollapse() {
            this.isCollapseVm = !this.isCollapseVm;
            this.$emit("change", !this.isCollapseVm);
        }
    }
};
</script>

<style scoped>
.sc-collapse-title i {
    user-select: none;
    cursor: pointer;
}
</style>
